import {
  PageContainer,
} from '@ant-design/pro-components';
import '@umijs/max';
import ReactECharts from 'echarts-for-react';
import React, {useEffect, useRef, useState} from 'react';

import {Card, Col, message, Row} from "antd";
import {listTopInvokeInterfaceUsingGet} from "@/services/api-backend/analysisController";


const InterfaceInfoAnalysis: React.FC = () => {

  const [data, setData] = useState<API.InterfaceInfoVO[]>([])
  const [loading, setLoading] = useState<boolean>(true)
  useEffect(() => {
    try {
      listTopInvokeInterfaceUsingGet().then(res => {
        if (res.data) {
          setData(res.data || [])
        }
      })
    } catch (error) {
      message.error('修改失败');
    }
  }, [])
  const chartData = data.map(item => {
    return {
      value: item.totalNum,
      name: item.name
    }
  })
  const option = {
    title: {
      text: 'Top3调用次数最多的接口',
      left: 'center'
    },
    // 设置浮现，对应调用次数
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        // 图表类型，饼图
        type: 'pie',
        radius: '50%',
        data: chartData,
        emphasis: {
          //选择对应饼图板块时的浮现特效
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  return (
    <PageContainer>
      <Row gutter={[16, 16]} justify="space-between">
        <Col  span={12}>
          <Card bordered={false}>
            <ReactECharts loadingOption={{showLoading: loading}} option={option}/>
          </Card>
        </Col>
        <Col  span={12}>
          <Card bordered={false}>
            <ReactECharts loadingOption={{showLoading: loading}} option={option}/>
          </Card>
        </Col>
        <Col  span={12}>
          <Card bordered={false}>
            <ReactECharts loadingOption={{showLoading: loading}} option={option}/>
          </Card>
        </Col>
        <Col  span={12}>
          <Card bordered={false}>
            <ReactECharts loadingOption={{showLoading: loading}} option={option}/>
          </Card>
        </Col>
        <Col  span={12}>
          <Card bordered={false}>
            <ReactECharts loadingOption={{showLoading: loading}} option={option}/>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};
export default InterfaceInfoAnalysis;
